.content {
  @apply border border-solid rounded flex;
  height: 37.125rem;
  border-radius: 0.625rem;
  font-family: Alibaba PuHuiTi 2;

  &.contentPaypal {
    height: 41.125rem;
  }

  .close {
    @apply absolute right-5 top-5 w-5 h-5 cursor-pointer z-inherit;
  }

  .vipLeft {
    @apply pl-5 flex-1 h-full;
    width: 42.5rem;
    background: linear-gradient(180deg, #ffebe8 1%, #ffffff 25%);

    .vipUseInfo {
      @apply w-full flex items-center mb-1 relative;
      height: 8.125rem;
      background-image: url('/images/vipBgLeft.png');
      background-size: 100% 100%;

      .vipImg {
        @apply mr-5 relative;
        width: 3.5rem;
        height: 3.5rem;
        background-image: url('/images/user.png');
        background-size: 100% 100%;

        .vipLogo {
          @apply absolute bottom-0 right-0;
          width: 1.125rem;
          height: 1.125rem;
        }
      }

      .vipName {
        @apply text-left;

        & > p:nth-child(1) {
          @apply text-xl font-semibold leading-5 text-black;
          max-width: 25rem;
          margin-bottom: 0.625rem;
        }

        & > p:nth-child(2) {
          @apply text-sm;
          font-weight: 300;
          line-height: 0.875rem;
          color: #7c3c19;
        }
      }
    }

    .vipChoose {
      @apply flex h-4;

      & > img {
        @apply w-4 h-4;
        margin-right: 0.625rem;
      }

      .span1 {
        @apply text-base leading-4 font-bold;
        font-family: PingFang SC;
        text-transform: capitalize;
        color: #7c3c19;
      }

      .span2 {
        font-family: Alibaba PuHuiTi 2;
        font-size: 0.875rem;
        text-transform: uppercase;
        color: #7c3c19;
        margin-left: 0.625rem;
      }
    }

    .vipTaocan {
      @apply flex my-5;
      height: 13.75rem;

      .vipTaocanItem {
        @apply h-full flex flex-col items-center relative cursor-pointer px-2;
        width: 12.5rem;
        background-image: url('/images/taocan1.webp');
        background-size: 100% 100%;

        &:not(:first-child) {
          @apply ml-5;
        }

        &.active {
          background-image: url('/images/taocan2.webp');

          .discountMark {
            @apply text-theme;
          }
        }

        .cornerMark {
          @apply absolute inline-block rounded font-bold text-white text-xs text-center italic;
          left: 0.375rem;
          top: 0.375rem;
          width: 4.375rem;
          height: 1.5625rem;
          line-height: 1.5625rem;
          background: linear-gradient(90deg, #ff651d 0%, #ffb521 100%);
          font-family: REEJI-HonghuangLiGB;
        }

        .desc {
          @apply font-bold text-white text-xl leading-5;
          font-family: Alibaba PuHuiTi 2;
          color: #333;
          margin-top: 3.75rem;
        }

        .popular {
          @apply text-sm inline-block text-white absolute text-center font-bold text-white;
          min-width: 5rem;
          right: 0.625rem;
          top: 1.875rem;
          height: 1.375rem;
          line-height: 1.375rem;
          background: linear-gradient(90deg, #fe5666 4%, #fe7dd3 96%);
          border-radius: 1.375rem;
          border-bottom-left-radius: 0;
          font-family: PingFang SC;
        }

        .price {
          @apply font-bold relative w-fit mb-5;
          color: #7c3c19;
          margin-top: 0.625rem;

          & > span:nth-child(1) {
            @apply text-xl font-extrabold leading-5;
            margin-right: 0.375rem;
          }

          & > span:nth-child(2) {
            @apply font-bold leading-10;
            font-size: 2.5rem;
            font-feature-settings: 'kern' on;
          }
        }

        .discountMark {
          @apply text-xs leading-3;
          font-feature-settings: 'kern' on;
          font-family: Alibaba PuHuiTi 2;
          color: #999;
        }
      }
    }

    .vipPayWay {
      @apply flex mt-5;

      .payWayItem {
        @apply rounded flex items-center cursor-pointer pl-5 rounded-lg overflow-hidden relative;
        width: 9.25rem;
        height: 3.375rem;
        background: #f7f7f7;

        &:not(:first-child) {
          @apply ml-4;
        }

        & > img {
          @apply h-6 w-6 object-contain;
          margin-right: 0.625rem;
        }

        & > span {
          font-family: Alibaba PuHuiTi 2;
          font-size: 0.875rem;
          font-variation-settings: 'opsz' auto;
          color: #1a1a1a;
        }

        &.active {
          background: linear-gradient(180deg, #ffe6d4 0%, #fff6ed 75%);

          &::after {
            @apply absolute w-full h-full left-0 top-0;
            content: '';
            border: 4px solid;
            border-image: linear-gradient(110deg, #ff4ad5 0%, #ffb200 46%, #ff8400 100%) 4;
          }
        }
      }
    }

    .btnOpen {
      @apply text-base text-white mt-8;
      width: 40rem;
      height: 2.75rem;
      background: #0b0300;
    }
  }

  .vipRight {
    @apply h-full flex flex-col items-center justify-center overflow-hidden;
    width: 20rem;
    background-image: url('/images/vipBgRight.webp');
    background-size: 100% 100%;

    &.vipRightHidden {
      width: 0;
    }

    .tips {
      @apply text-xl font-bold leading-5 mb-10;
      font-family: PingFang SC;
      text-transform: capitalize;
      color: #e45700;
    }

    .qrcodeBox {
      @apply bg-white flex items-center justify-center relative;
      width: 15.5rem;
      height: 15.5rem;
      border-radius: 0.625rem;
      border: 4px solid #ffb68b;

      .qrcode {
        width: 13.75rem !important;
        height: 13.75rem !important;
      }

      .paySuccess {
        @apply absolute w-full h-full left-0 top-0 flex items-center flex-col justify-center;
        background-color: rgba(255, 255, 255, 0.96);

        & > img {
          @apply h-10 w-10;
        }

        .payDesc {
          @apply font-bold mt-6;
          font-family: Alibaba PuHuiTi 2;
          font-size: 1.375rem;
          line-height: 1.375rem;
          color: #333;
          margin-bottom: 0.625rem;
        }

        .payTips {
          @apply text-sm font-semibold leading-6;
          font-family: Alibaba PuHuiTi 2;
          font-feature-settings: 'kern' on;
          color: #7c3c19;
        }
      }
    }
  }
}
